<template>
  <div class="pos">
   	
   		 <el-row>
            <el-col :span='7' class="pos-border" id="order-list">
            	<el-tabs>
            		<el-tab-pane label="点餐" el-tab-pane>
            			<el-table :data="tableData" border style="width:100%">
            				<el-table-column prop="goodsName" label="名称"> </el-table-column>
            				<el-table-column prop="price" label="单价" width="70px"> </el-table-column>
            				<el-table-column prop="count" label="数量" width="70px"> </el-table-column>
            				<el-table-column  label="操作" fixed="right" width="100px"> 
								<template scope="scope">
									<el-button type="text" size="small" @click="delGood(scope.row)">删除</el-button>
									<el-button type="text" size="small" @click="addGoods(scope.row)">增加</el-button>
								</template>

            				</el-table-column>
            			</el-table>
            			<div class="hj">
            				总数:{{allCount}}   总价：{{allMoney}}元
            			</div>
            			<div class="cz-btn">
            				<el-button type="warning" @click="guadan">挂单</el-button>
            				<el-button type="danger" @click="delAllGoods">删除</el-button>
            				<el-button type="success" @click="checkout">结账</el-button>
            			</div>
            		</el-tab-pane>
            		<el-tab-pane label="挂单">
            			<ul class="gd-list">
            				<li v-for="goodsli in allGoods">
            					<span>{{goodsli.goodsName}}</span>
            					<span>{{goodsli.count}}个</span>
            				</li>
            			</ul>
            		</el-tab-pane>
            		<el-tab-pane label="外卖">
            			
            		</el-tab-pane>
            	</el-tabs>



            </el-col>
            <!--商品展示凑成24栏-->
            <el-col :span="17">
            	<div class="often-goods">
            		<div class="title">常用商品</div>
            		<div class="often-goods-list">
            			<ul>
            				<li v-for="goods in oftenGoods" @click="addGoods(goods)">
            					<span>{{goods.goodsName}}</span>
            					<span class="price">¥{{goods.price}}元</span>
            				</li>
            			</ul>
            		</div>
            		<div class="goodsType">
            			<el-tabs>
            				<el-tab-pane label="汉堡">
            					<div>
            						<ul class="cookList">
            							<li v-for="types in type0Goods" @click="addGoods(types)">
            								<span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
            								<span class="foodName">{{types.goodsName}}</span>
            								<span class="foodPrice">¥{{types.price}}元</span>
            							</li>
            						</ul>
            					</div>
            				</el-tab-pane>
            				<el-tab-pane label="小食">
            					<ul class="cookList">
            							<li v-for="types in type1Goods" @click="addGoods(types)">
            								<span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
            								<span class="foodName">{{types.goodsName}}</span>
            								<span class="foodPrice">¥{{types.price}}元</span>
            							</li>
            						</ul>
            				</el-tab-pane>
            				<el-tab-pane label="饮料">
            					<ul class="cookList">
            							<li v-for="types in type2Goods" @click="addGoods(types)">
            								<span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
            								<span class="foodName">{{types.goodsName}}</span>
            								<span class="foodPrice">¥{{types.price}}元</span>
            							</li>
            						</ul>
            				</el-tab-pane>
            				<el-tab-pane label="套餐">
            					<ul class="cookList">
            							<li v-for="types in type3Goods" @click="addGoods(types)">
            								<span class="foodImg"><img :src="types.goodsImg" width="100%"></span>
            								<span class="foodName">{{types.goodsName}}</span>
            								<span class="foodPrice">¥{{types.price}}元</span>
            							</li>
            						</ul>
            				</el-tab-pane>
            			</el-tabs>
            		</div>
            	</div>
            </el-col>
        </el-row>
   	
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'pos',
  data(){
  	return{
  		tableData:[],
  		// {
          
    //       goodsName: '可口可乐',
    //       price: 8,
    //       count:1
    //     }, {
          
    //       goodsName: '香辣鸡腿堡',
    //       price: 15,
    //       count:1
    //     }, {
         
    //       goodsName: '爱心薯条',
    //       price: 8,
    //       count:1
    //     }, {
         
    //       goodsName: '甜筒',
    //       price: 8,
    //       count:1
    //     }
  		oftenGoods:[],
  		type0Goods:[],
  		type1Goods:[],
  		type2Goods:[],
  		type3Goods:[],
  		allCount:0,
  		allMoney:0,
  		allGoods:[]//挂单的所有食物
  	}
  },
  created:function(){
  	let temp=localStorage.getItem("orderLists");
  		//this.allGoods.push(JSON.parse(temp));//数组里面还是数组
  		this.allGoods=JSON.parse(temp);
  	axios.get('http://jspang.com/DemoApi/oftenGoods.php')
  	.then(response=>{
  		this.oftenGoods=response.data;
  	})
  	.catch(error=>{
  		alert("服务器异常");
  	});
  	axios.get('http://jspang.com/DemoApi/typeGoods.php')
  	.then(response=>{
  		this.type0Goods=response.data[0];
  		this.type1Goods=response.data[1];
  		this.type2Goods=response.data[2];
  		this.type3Goods=response.data[3];
  	})
  	.catch(error=>{
  		alert("服务器异常");
  	});
  },
  mounted:function(){
  	//所有虚拟dom加载完成之后才执行  element是虚拟的
  	var orderHeight=document.body.clientHeight;
  	document.getElementById("order-list").style.height=orderHeight+'px';
  },
  methods:{
  	//添加商品
  	addGoods(goods){

  		this.allCount=0;
  		this.allMoney=0;
  		//判断这个商品是否已经在订单列表中
  		//如果存在则数量加1,
  		//如果不存在则放入数组中
  		let isHave=false;
  		//不加this是会找不到对象的
  		for(let i in this.tableData){
  			//console.log(this.tableData[i]);
  			if(this.tableData[i].goodsId==goods.goodsId){
  				isHave=true;
  			}
  		}
  		if(isHave){
  			let arr=this.tableData.filter(o=>o.goodsId==goods.goodsId);
  			//filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  			arr[0].count++;
  		}else{
  			let newGoods={goodsId:goods.goodsId,goodsName:goods.goodsName,price:goods.price,count:1};
  			this.tableData.push(newGoods);
  		}

  		this.getAll();

  	},
  	delGood(good){
  		this.tableData=this.tableData.filter((o)=>o.goodsId != good.goodsId);
  		this.getAll();
  	},//总计
  	getAll(){
  		this.allCount=0;
  		this.allMoney=0;
  		//总计for循环表格里面的值然后进行相加
  		this.tableData.forEach((element)=>{
  			this.allCount +=element.count;
  			this.allMoney =this.allMoney+element.price*element.count;
  		})
  	},
  	delAllGoods(){
  		if(this.tableData){
  			this.tableData=[];
  			this.allMoney=0;
  			this.allCount=0;
  		}
  		
  	},
  	checkout(){
  		//结账
  		if(this.allMoney){
  			this.tableData=[];
  			this.allMoney=0;
  			this.allCount=0;
  			this.$message({
  				type:"success",
  				message:'结账成功'
  			})
  		}else{
  			this.$message.error("没有食物");
  		}
  	},
  	guadan(){
  		//挂单 localStorage只能存儲字符串  this.tableData是数组
  		debugger;
		//  if(window.localStorage){
		//  alert('This browser supports localStorage');
		// }else{
		//  alert('This browser does NOT support localStorage');
		// };
		//将数组转换为字符串evl
		let str=JSON.stringify(this.tableData);
  		localStorage.setItem("orderLists",str);
  		let temp=localStorage.getItem("orderLists");
  		//this.allGoods.push(JSON.parse(temp));//数组里面还是数组
  		this.allGoods=this.allGoods.concat(JSON.parse(temp));
  		//this.allGoods=JSON.parse(temp);
  		//localStorage.removeItem("key");//删除名称为“key”的信息。
		//localStorage.clear();​//清空localStorage中所有信息
  	}
  }
 
}
</script>
<style scoped>
	
	.pos-border{
		background-color: #F9FAFC;
		border-right:1px solid #c0ccda;
	}
	.cz-btn{
		padding-top: 10px
	}
	.title{
		height:20px;
		border-bottom: 1px solid #d3dce6;
		background-color:#f9fafc;
		padding:10px;
		text-align:left;
	}
	.often-goods-list ul li{
		list-style:none;
		float:left;
		border:1px solid #e5e9f2;
		padding:10px;
		margin:10px;
		background-color: #fff;
		cursor: pointer;
	}
	.price{
		color:#58b7ff;
	}
/*清除浮动*/
	.goodsType{
		clear:both;
		cursor:pointer;

	}
	.cookList li{
       list-style: none;
       width:23%;
       border:1px solid #E5E9F2;
       height: auto;
       overflow: hidden;
       background-color:#fff;
       padding: 2px;
       float:left;
       margin: 2px;
 
   }
   .cookList li span{
       
        display: block;
        float:left;
   }
   .foodImg{
       width: 40%;
   }
   .foodName{
       font-size: 17px;
       padding-left: 10px;
       color:brown;
 
   }
   .foodPrice{
       font-size: 16px;
       padding-left: 10px;
       padding-top:10px;
   }
   .hj{
   	padding:10px;
   	text-align:left;
   	border-bottom:1px solid #E5E9F2;
   	background-color: #fff;
   }
   .gd-list{
   	list-style:none;
   	background-color: #fff;
   	padding:10px;
   	margin:10px;
   	text-align:left;
   }
</style>



